<template name="ztime">
	<view class="picker-view">
		<!-- <text class="question">{{que}}<text class="tip" v-if="!empty">*</text></text> -->
		<view class="answer-view theme-input row-arrange" style="width:99%">
			<datetimePicker :ref="'first'" :precision="precision" class="first"/>
			<text class="normal-font-size middle">{{interval?"到":""}}</text>
			<datetimePicker v-if="interval" :ref="'second'" :precision="precision" class="second"/>
		</view>
		<text class="tip" v-if="errorText.length>0">{{errorText}}</text>
	</view>
</template>

<script>
	import datetimePicker from "../datetime-picker"
	export default {
		name : "ztime",
		data() {
			return {
				errorText : "",
				empty : false
			};
		},
		components : {
			datetimePicker
		},
		props : {
			compType : {
				type : String,
				default : "ztime"
			},
			precision : {
				type : Number,
				default : 31
			},
			interval : {
				type : Boolean,
				default : false
			}
		},
		created : function(e){
			// console.log(this.precision)
		},
		methods: {
			getTimeStr : function(timeJson){
				// console.log(timeJson)
				var res = '';
				if(this.precision >> 4 & 1 == 1) res += timeJson['year'] + '年';
				if(this.precision >> 3 & 1 == 1) res += timeJson.month + '月';
				if(this.precision >> 2 & 1 == 1) res += timeJson.day + '日';
				if(this.precision >> 1 & 1 == 1) res += timeJson.hour + '时';
				if(this.precision & 1 == 1) res += timeJson.minute + '分';
				return res;
			},
			get : function(){
				var refs = this.$refs;
				var firstJson = refs['first'].get();
				var res = ''
				res += this.getTimeStr(firstJson);
				if(this.interval){
					var secondJson = refs['second'].get();
					res+= '到' + this.getTimeStr(secondJson);
				}
				
				// console.log(res);
				// console.log(refs['second']);
				return res;
			}
		}
	}
</script>

<style>
@import "../../../common/zcss.css";
	.picker-view{
		flex-direction: column;
	}
	.question{
		display: inline;
		font-size: 15upx;
	}
	.answer-view{
		position: relative;
		height: 80upx;
	}
	.first{
		position: absolute;
		left:1%;
	}
	.second{
		position: absolute;
		right:1%;
	}
	.middle{
		position: absolute;
		left: 47%;
		font-size: 40upx;
	}
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 30upx;
	}
</style>
